<template>
  <div :style="note" class="login-container">
    <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
      <div style="color: transparent">占位符</div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="margin-top: 60px">
      <el-form
          :rules="rules"
          ref="loginForm"
          v-loading="loading"
          element-loading-text="正在登录..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :model="loginForm"
          class="loginContainer"
      >
        <h3 class="loginTitle">商品管理系统</h3>
        <el-divider
        ><span style="font-size: 14px; color: #8c8c8c"
        >统一认证中心</span
        ></el-divider
        >
        <el-form-item prop="username">
          <el-input
              size="normal"
              type="text"
              v-model="loginForm.username"
              auto-complete="off"
              placeholder="职工号/学号"
              clearable
              prefix-icon="el-icon-user"
              @keydown.enter.native="submitLogin"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              size="normal"
              type="password"
              v-model="loginForm.password"
              auto-complete="off"
              placeholder="密码"
              clearable
              prefix-icon="el-icon-lock"
              @keydown.enter.native="submitLogin"
          ></el-input>
        </el-form-item>


        <el-form-item style="margin: 0">
          <el-checkbox
              size="normal"
              class="loginRemember"
              v-model="loginForm.rememberMe"
          >一周内免登录
          </el-checkbox
          >
        </el-form-item>
        <el-button
            size="normal"
            type="primary"
            style="width: 100%"
            @click="submitLogin"
            :disabled="forbidLogin"
        >登录
        </el-button>
      </el-form>
    </el-col>
  </div>
</template>

<script>
import request from "@/api/request";
import Cookies from "js-cookie";

export default {
  name: "Login",
  data() {
    return {
      loading: false,
      forbidLogin: true,
      loginForm: {
        username: "admin",
        password: "123456",
        rememberMe: true,
      },
      loginAdmin: {},
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
      },
      note: {
        backgroundColor: "#f9f9f9",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        position: "absolute",
        backgroundSize: "100% 100%",
      },
    };
  },
  watch: {
    "loginForm.username": function (val, oldValue) {
      this.forbidLogin = !this.checkData();
    },
    "loginForm.password": function (val, oldValue) {
      this.forbidLogin = !this.checkData();
    },
  },
  methods: {
    checkData() {
      return this.loginForm.username !== "" && this.loginForm.password !== "";
    },
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
            if (valid && !this.forbidLogin) {
              this.loading = true;
              request.post("/user/login", this.loginForm).then((res) => {
                if (res.code == "20000") {
                  this.loading = false;
                  this.loginAdmin = res.data;
                  Cookies.set("userInfo", JSON.stringify(this.loginAdmin));
                  Cookies.set("token", res.data.token);
                  this.$router.push("/backLayout");
                  this.$notify.success("登录成功");
                } else {
                  this.$notify.error(res.message);
                  this.loading = false;
                }
              })


            } else {
              this.$message.error("请输入所有的字段!");
              return false;
            }
          }
      )
      ;
    },
  },
};
</script>

<style>
.login-container {
  height: 100vh;
  background: url("~@/assets/LoginBackground/background.jpg") center center fixed no-repeat;
  background-size: cover;
}

.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  width: 350px;
  margin: 30px auto;
  margin-top: 100px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  margin: 15px auto 20px auto;
  text-align: center;
  color: #505458;
  font-size: larger;
}

.loginRemember {
  text-align: left;
  margin: 0 0 15px 0;
}
</style>